<body></body>
<script>
  let activeEffect
  const bucket = new Weakmap()
  const obj = new Proxy(data, {
    get(target, key) {
      if (!activeEffect) return target[key]
      //   取出 target对应的 depsMap
      let depsMap = bucket.get(target)
      if (!depsMap) {
        bucket.set(target, (depsMap = new Map()))
      }
      //   取出与 key对应的 effects（副作用函数一个集合）
      let deps = depsMap.get(key)
      if (!deps) {
        depsMap.set(key, (deps = new Set()))
      }
      //   添加到“桶”里
      deps.add(activeEffect)
      return target[key]
    },
    set(target, key, newVal) {
      target[key] = newVal
      //   取出 target对应的 depsMap
      const depsMap = bucket.get(target)
      if (!depsMap) return
      //  取出与 key对应的 effects
      const effects = depsMap.get(key)
      //  执行副作用函数
      effects && effects.forEach(fn => fn())
    }
  })
</script>
